<template>
	<!-- 半全场 -->
	<view class="yc-data-checkbox">
		<view class="box">
			<view class="box" v-if="noshowgame(4,'bqc')" style="flex-wrap: wrap;">
				<view class="check" v-for="item,index in styledata.bqc.res" :key="index"
					style="height: 75rpx;flex: 33%;"
					:style="styledata.bqc.style[index]==0?'':' background-color: red; color: #fff;'"
					@click="change('bqc',index,4)">
					<view class="huadan">
						<text style="font-weight: 700;font-size:28rpx;">{{item}}</text><br>
						<text style="margin-left: 5px;font-size:28rpx;">
							{{fixSelectData.bqc[index]}}
						</text>
					</view>
				</view>
			</view>
			<view v-else class="check" style="flex: 1;">
				<view style="color: #999999;">
					未开售
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import date from "/common/getdatetime.js";
import Vue from "vue";

export default {
  props: {
    Refresh: {
      type: Boolean,
      default: false
    },
    fixSelectData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      temporaryArr: "",
      deleteId: this.fixSelectData.id,
      styledata: {}
    };
  },
  methods: {
    init() {
      this.temporaryArr = "";
      // 字典
      const arr = {
        bqc: {
          style: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          res: ['胜-胜', '胜-平', '胜-负', '平-胜', '平-平', '平-负', '负-胜', '负-平', '负-负'],
        }
      };
      this.styledata = arr;
    },
    change(game, index, gameId) {
      const array = {
        awayTeamAbbName: this.fixSelectData.short_away,
        homeTeamAbbName: this.fixSelectData.short_home,
        matchId: this.fixSelectData.id,
        leagueAbbName: this.fixSelectData.short_comp,
        matchNumStr: this.fixSelectData.issue_num,
        gameDeadline: date.getNowFormatDate(0, this.fixSelectData.match_time * 1000),
        orderDeadline: "",
        sort: this.fixSelectData.match_time,
        data: [{
          res: this.styledata[game].res[index],
          rate: this.fixSelectData[game][index],
          poolEs: Number(this.noshowdan(gameId)),
          gameState: game
        }]
      };

      if (this.styledata[game].style[index] === 0) {
        this.styledata[game].style[index] = 1;
        if (this.temporaryArr === "") {
          const ojb = {
            gameData: array,
            selectBoole: true
          };
          this.temporaryArr = ojb;
        } else {
          this.temporaryArr.selectBoole = true;
          const newOjd = {
            res: this.styledata[game].res[index],
            rate: this.fixSelectData[game][index],
            poolEs: Number(this.noshowdan(gameId)),
            gameState: game
          };
          this.temporaryArr.gameData.data.push(newOjd);
        }
        this.$emit("getSelectList", this.temporaryArr);
      } else {
        this.styledata[game].style[index] = 0;
        if (this.temporaryArr.gameData.data.length === 1) {
          array.data = [];
          const ojb = {
            gameData: array,
            selectBoole: false
          };
          this.temporaryArr = ojb;
        } else {
          const Delindex = this.temporaryArr.gameData.data.findIndex(
            item => item.res === this.styledata[game].res[index]
          );
          this.temporaryArr.gameData.data.splice(Delindex, 1);
        }
        this.$emit("getSelectList", this.temporaryArr);
      }
    },
    noshowdan(id) {
      id = String(id);
      const res = this.fixSelectData.sell_status[id];
      if (res === "2" || id === 4) {
        return true;
      } else {
        return false;
      }
    },
    noshowgame(id, gameType) {
      const res = this.fixSelectData.sell_status[id];
      if (res === "1" || res === "2" || this.fixSelectData[gameType].length > 1 || this.fixSelectData[gameType]["goalLine"]) {
        return true;
      } else {
        return true;
      }
    },
    openpopup() {
      this.$refs.hhggpopup.open("bottom");
    },
    closeupup() {
      this.$refs.hhggpopup.close("bottom");
    }
  },
  watch: {
    Refresh: {
      handler() {
        this.init();
      },
      immediate: true
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
	.inner-box1 text {
		position: absolute;
		left: 25%;
		bottom: -2px;
		color: #fff;
		transform: translateX(-50%);
	}
	
	.inner-box1 {
	
		width: 50%;
		height: 50%;
		background-color: red;
		transform: rotate(-45deg);
		position: absolute;
		left: -15%;
		top: -15%;
	}
	
	.huadan {
		text-align: center;
		overflow: hidden;
		line-height:30rpx;
	}
	
	.check {
		flex:1;
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 边框 */
		border: 3rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.box {

		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		text-align: center;


	}

	text {
		margin: 1px;
		font-size: 20rpx;

		text-align: center;
	}
	
	.button {
		height: 80rpx;
		width: 100%;
		color: #ff0000;
		font-size: 26rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	
		/* 边框 */
		border: 3rpx solid #ff0000;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.buttonbox {
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		/* 边框 */
		border: 1rpx solid #edf0f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.buttonboxx {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.checkbox {

		flex: 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* 边框 */
		/* border: 1rpx solid #edf0f3;
	  -webkit-box-sizing: border-box; 
	  box-sizing: border-box; */
	}

	.yc-data-checkbox {
		margin: 5px;
		height: 225rpx;
		display: flex;
		flex-direction: row;
		text-align: center;


	}
</style>